<template>
  <div>
    <!-- 面包屑 -->
    <div class="breadNav" style="margin: 20px 0 20px 20px;">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened" >积分商城</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">商品列表</el-breadcrumb-item>
        </el-breadcrumb>  
    </div>
    <!-- 导航栏 -->
    <el-menu :default-active="activeIndex" style="width:500px;background: none;" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">全部商品</el-menu-item>
      <el-menu-item index="2">出售中</el-menu-item>
      <el-menu-item index="3">已售罄</el-menu-item>
      <el-menu-item index="4">仓库中</el-menu-item>
      <el-menu-item index="5">回收站</el-menu-item>
    </el-menu>
    <div class="line"></div>
    <!-- 添加商品 -->
    <div class="x_button">
      <el-row>
        <el-button @click="add()">添加商品</el-button>
      </el-row>
    </div>
    <!-- 商品表格 -->
    <div class="x_goodsTable">
      <el-table :data="tableData2" border style="width: 100%">
        <div>
          <el-table-column fixed prop="sort" label="排序" width="110">
          </el-table-column>
          <el-table-column prop="text" label="商品" width="130">
          </el-table-column>
          <el-table-column prop="goods_type" label="商品类型" width="110">
            积分商品
          </el-table-column>
          <el-table-column prop="active_type" label="活动类型" width="110">
            兑换
          </el-table-column>
          <el-table-column prop="waste" label="消耗" width="150">
            -50积分
          </el-table-column>
          <el-table-column prop="changeP" label="兑换人数" width="110">
              10
          </el-table-column>
          <el-table-column prop="state" label="状态" width="110">
            出售中
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="x_edit(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </div>

      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination 
      @size-change="handleSizeChange"
       @current-change="handleCurrentChange" 
       :current-page.sync="currentPage1" 
       :page-size=this.size 
       layout="total, prev, pager, next" 
       :total="this.tableData.length"
       >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Axios from '../../../api/api'
import { delListApi, getGoodsList } from '../../../api'
export default {
  data() {
    return {
      // 导航栏
      activeIndex: '1',
      // 商品表格
      tableData: [],
      tableData2: [],
      // 分页
      currentPage1: 1,
      size:5
    }
  },

  created(){
    getGoodsList().then((res) => {
      console.log(res)
      this.tableData = res.data
      this.fn()
      console.log( this.tableData2)
      // this.fn()
    })
  },
  methods: {
    suibian() { // 封装
      getGoodsList().then((res) => {
      // console.log(res)
      this.tableData2 = res.data
      this.fn()
      // this.total = res.length
    })
    },
    // 导航栏
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    // 添加商品
    add() {
      this.$router.push({
        path: '/xeditList',
        name: 'edit',
        params: {
          title: '添加积分商品',
        },
      })
    },
    //  删除
    handleClick(row) {
      console.log(row)
      delListApi({ id: row.id }).then((res) => {
        this.suibian()
      })
    },
    // 编辑
    x_edit(row) {
      console.log(row)
      this.$router.push({
        path: '/editList',
        name: 'editList',
        params: {
          data: row,
        },
      })
    },
    // 分页封装
    fn() {
      this.tableData2 = this.tableData.slice((this.currentPage1-1)*this.size,this.currentPage1*this.size)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      // this.fn()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`) 
      this.currentPage1 = val
      this.fn()
    },
  },
}
</script>

<style lang="scss" scoped>
.goods_list {
  margin-left: 20px;
}
.x_button {
  margin: 50px 30px;
}
.x_goodsTable {
  width: 1000px;
  margin-left: 30px;
  .el-table thead {
    background: lightgray;
  }
}
.block {
  float: right;
  margin: 30px 100px;
}
</style>